<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
  </head>
  <body>
    <!-- 
    1.vue常用的按键别名：
      回车  enter
      删除  delete（捕获 删除/退格 键）
      退出  esc
      空格  space
      换行  tab（必须配合 keydown 使用，因为按下焦点就不在绑定函数的元素上了）
      上    up
      下    down
      左    left
      右    right

    2.vue未提供的别名按键，可以使用按键原始的key值绑定，但注意要转成kebab-case（短横线命名）
      比如大小写  caps-lock

    3.系统修饰键（用法特殊：ctrl、alt、shift、meta（win）
      （1）配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，才触发
      （2）配合keydown使用：正常触发
    
    4.也可以指定具体keyCode使用（不推荐）
    
    5.Vue.config.keyCodes.自定义键名 = 键码 ，可以自定义按键别名
    -->
    <div id="root">
      <input type="text" placeholder="按下回车提示输入" @keyup.enter="showInfo" />
    </div>
    <script type="text/javascript">
      Vue.config.productionTip = false;
      // Vue.config.keyCodes.huiche =13
      
      const vm = new Vue({
        data: {},
        methods: {
          showInfo(e) {
            // if (e.keyCode !== 13) return;
            console.log(e.key,e.keyCode);
            
            console.log(e.target.value);
          },
        },
      });
      vm.$mount("#root");
    </script>
  </body>
</html>
